<template>
    <el-tabs v-model="activeName" @tab-click="tabsChange" :stretch="true" style="height: 100%">
        <el-scrollbar :height="scrollHeight?scrollHeight:isTagsview ? `calc(100vh - 154px)` : `calc(100vh - 120px)`">
            <div>
                <zh-form ref="formRef" style="width: 96%" :md="12" :lg="12" :xl="12" :model="dataSourceInfo" :rules="rules"
                         label-width="200px">
                    <zh-form-input prop="dataSourceid" label="ID" placeholder="" v-model="dataSourceInfo.dataSourceid"
                                   disabled></zh-form-input>
                    <zh-form-input prop="dataSourcename" label="数据源名称" placeholder=""
                                   v-model="dataSourceInfo.dataSourcename"></zh-form-input>

                    <zh-form-select
                            prop="dataSourcetype"
                            label="数据源类型"
                            :options="state.dictData.dataSourcetype"
                            placeholder="请选择"
                            v-model="dataSourceInfo.dataSourcetype"
                    ></zh-form-select>


                    <zh-form-select
                            prop="characterset"
                            label="字符集类型"
                            :options="state.charactersetDict"
                            placeholder="请选择"
                            v-model="dataSourceInfo.characterset"
                    ></zh-form-select>


                    <zh-form-input prop="url" label="JDBC路径" placeholder="请输入jdbc路径，如jdbc:oracle:thin:@ip:1521:dbname"
                                   v-model="dataSourceInfo.url"></zh-form-input>
                    <zh-form-input prop="username" label="用户名" placeholder=""
                                   v-model="dataSourceInfo.username"></zh-form-input>
                    <zh-form-input prop="password" label="密码" placeholder=""
                                   v-model="dataSourceInfo.password"></zh-form-input>

                </zh-form>
            </div>
        </el-scrollbar>
    </el-tabs>
</template>

<script lang="ts" setup name="DataCenterForm">
    import {FormInstance} from 'element-plus';
    //------------------接收传入参数------------------------
    const props = defineProps({
        scrollHeight: {
            type: String,
            default: ''
        }
    });

    //------------------定义子组件---------------------------
    const formRef = ref<FormInstance>();

    //------------------内部变量定义-------------------------
    const state = reactive({
        hideChecked: false,
        confirmLoading: false,
        dictData: {} as any,
        initData: {},
        appDict: [],
        orgDict: [],
        devOrgDict: [],
        envDict: [],
        charactersetDict: [
            {dictKey: 'UTF8', dictValue: 'UTF8'},
            {dictKey: 'GBK', dictValue: 'GBK'}
        ],
    });
    const rules = reactive({
        dataSourcename: [
            {
                required: true,
                message: '请输入数据源名称',
                trigger: 'blur',
            },
        ],
        characterset: [
            {
                required: true,
                message: '请输入字符集类型',
                trigger: 'blur',
            },
        ],
        dataSourcetype: [
            {
                required: true,
                message: '请输入数据源类型',
                trigger: 'blur',
            },
        ],
        url: [
            {
                required: true,
                message: '请输入数据源链接',
                trigger: 'blur',
            },
        ],
        username: [
            {
                required: true,
                message: '请输入password',
                trigger: 'blur',
            },
        ],
        password: [
            {
                required: true,
                message: '请输入密码',
                trigger: 'blur',
            },
        ],

    });
    const dataSourceInfo = ref<any>({});
    const {isTagsview} = storeToRefs($store.theme);

    //------------------定义调用方法-------------------------
    function setInitDate(info) {
        formRef.value?.resetFields();
        if (info) {
            dataSourceInfo.value = info;
        }
    }

    //------------------初始化------------------------------
    const params = {
        dictFields: 'dataSourcetype',
    };
    $api.common.getBatchDict.post(params).then((res) => {
        state.dictData = res.result;

    });

    //------------设置给父组件调用的数据/方法(组件)-----------
    defineExpose({setInitDate, form: formRef, dataSourceInfo});
</script>
